<template>
	<div class="video_player" ref="video"></div>
</template>

<script>
export default {
	name: 'videoPlayer',
	props: {
		fileSrc: String,
		data: {
			type: Object,
			default () {
				return {};
			}
		}
	},
	data() {
		return {
			videoPlayer: null
		};
	},
	computed: {
		videoTime() {
			return this.$route.query.time;
		},
		playerOption() {
			return {
				container: '.video_player', //容器的ID或className
				plug: 'hls.js', //设置使用hls插件
				volume: 0,
				// live: true,
				autoplay: true,
				video: [[this.fileSrc, '', '漳浦数字HD', 0]]
			};
		}
	},
	watch: {
		playerOption: {
			handler(data) {
				console.log(data);
				if(!data) return false;
				// this.playerOption.video = [['http://hw-m-l.cztv.com/channels/lantian/channel007/1080p.m3u8', '', '漳浦数字HD', 0]];
				this.videoPlayer = this.initializePlayer();
			},
			deep: true
		}
	},
	methods: {
		initializePlayer() {
			let player = new ckplayer(this.playerOption);
			this.$nextTick(() => {
				player.definition(0);
				if(!!this.videoTime) {
					player.seek(parseInt(this.videoTime));
				}
				player.loadeddata(() => {
					player.play();
				})
			})
			return player;
		}
	}
};
</script>

<style lang="scss" scoped>
.video_player {
	width: 100%;
	height: 100%;
}
</style>